<template>
    <div>
      <!-- 设置可选择单个级别  :props="{ checkStrictly: true }"-->
      <el-cascader
        :props="{ checkStrictly: checkStrictly, multiple: multiple }"
        :options="options"
        size="mini"
        v-model="selectedOptions"
        @change="handleChange"
        :style="{ width: width }"
      />
    </div>
  </template>
  
  <script>
  import { regionData, CodeToText, TextToCode } from 'element-china-area-data';
  export default {
    props: {
      // 绑定值, 当多选时，传入参数应该是数组，如['广东省', '湖南省']，当单选时，传入参数应该是字符串，如'广东省/广州市/越秀区'
      value: [String, Array, Object],
      // 是否多选
      multiple: { type: Boolean, default: false },
      // 是否可选择单级
      checkStrictly: { type: Boolean, default: false },
      // 组件宽度
      width: { type: String, default: '210px' },
    },
    watch: {
      value: {
        handler(val) {
          if (val) {
            // 首先将值转为数组
            // console.log('绑定的省市区值变化了', val, this.selectedOptions);
            // console.log('fdsfsfsf', typeof val);
            if (typeof val === 'string') {
              this.selectedOptions = this.getTextToCode(val);
            }
            if (typeof val === 'object') {
              console.log('这是多选的地址进来了');
              this.selectedOptions = val.map(item => {
                // console.log('item', item);
                let result = this.getTextToCode(item);
                // console.log('result', result);
                return result;
              });
              console.log('多地址转换结果this.selectedOptions', this.selectedOptions);
            }
          }
        },
        deep: true,
        immediate: true,
      },
    },
    data() {
      return {
        options: regionData,
        selectedOptions: [],
      };
    },
  
    methods: {
      getTextToCode(val) {
        if (val.indexOf('/') > -1) {
          const areaList = val.split('/');
          if (areaList.length == 1) {
            console.log('省');
            return [TextToCode[val.split('/')[0]].code];
          }
          if (areaList.length == 2) {
            let codeArr = [
              TextToCode[val.split('/')[0]].code,
              TextToCode[val.split('/')[0]][val.split('/')[1]].code,
            ];
            console.log('省/市', codeArr);
            return codeArr;
          }
          if (areaList.length == 3) {
            let codeArr = [
              TextToCode[val.split('/')[0]].code,
              TextToCode[val.split('/')[0]][val.split('/')[1]].code,
              TextToCode[val.split('/')[0]][val.split('/')[1]][val.split('/')[2]].code,
            ];
            console.log('省/市/区', codeArr);
            return codeArr;
          }
        }
        console.log('只有一个名称');
        return [TextToCode[val].code];
      },
      handleChange(value) {
        console.log('handleChange', value);
        if (this.multiple) {
          console.log('多选', value);
          let distAreaArr = [];
          for (var i = 0; i < value.length; i++) {
            distAreaArr.push(this.getCodeToText(null, value[i]));
          }
          this.$emit('input', distAreaArr);
          return;
        }
        console.log('单选', value);
        let area = this.getCodeToText(null, value);
        this.$emit('input', area);
        console.log('selectedOptions', this.selectedOptions);
      },
      getCodeToText(codeStr, codeArray) {
        try {
          let area = '';
          if (null === codeStr && null === codeArray) {
            return null;
          } else if (null === codeArray) {
            codeArray = codeStr.split(',');
          }
          switch (codeArray.length) {
            case 1:
              area += CodeToText[codeArray[0]];
              break;
            case 2:
              area += CodeToText[codeArray[0]] + '/' + CodeToText[codeArray[1]];
              break;
            case 3:
              area +=
                CodeToText[codeArray[0]] +
                '/' +
                CodeToText[codeArray[1]] +
                '/' +
                CodeToText[codeArray[2]];
              break;
            default:
              break;
          }
          // console.log('计算出来的区域信息', area);
          return area;
        } catch (error) {
          console.log('获取地区信息失败', error);
        }
      },
    },
  };
  </script>
  
  <style>
  input[aria-hidden='true'] {
    display: none !important;
  }
  
  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
  }
  </style>
  
  